<!-- 展示客户个人信息与拨打客户电话的按钮的卡片。 -->
<script setup lang="ts">
defineProps<{
  contactName: string
  contactIdentity: string
  contactMobile: string
  showEditButton?: boolean
}>()

defineEmits(['call', 'edit'])
</script>

<template>
  <view class="flex justify-between items-center px-30rpx py-35rpx bg-white rounded-20rpx">
    <view class="flex flex-col">
      <view class="flex mb-10rpx">
        <view class="text-28rpx leading-28rpx text-secondary">
          {{ contactName }}
        </view>
        <view class="flex justify-center items-center px-22rpx py-5rpx ml-10rpx text-white text-24rpx leading-24rpx bg-brand rounded-50rpx">
          {{ contactIdentity }}
        </view>
      </view>
      <view class="text-28rpx leading-28rpx text-secondary">
        {{ contactMobile }}
      </view>
    </view>
    <view class="flex items-center">
      <RGButton v-if="showEditButton" size="small" type="secondary" corner="small" @tap="$emit('edit')">
        编辑
      </RGButton>
      <Spacer width="12" />
      <RGButton size="small" type="primary" corner="small" @tap="$emit('call')">
        <image class="w-24rpx h-24rpx mr-10rpx" src="@/static/images/phone.png" />
        呼叫
      </RGButton>
    </view>
  </view>
</template>

<style scoped>
.contact-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 35rpx 30rpx;
  background-color: var(--background);
  border-radius: 20rpx;
}

.contact-card-left {
  display: flex;
  flex-direction: column;
}

.contact-card-left-top {
  display: flex;
  margin-bottom: 10rpx;
}

.contact-name {
  font-size: 28rpx;
  line-height: 28rpx;
  font-weight: medium;
  color: #333333;
}

.contact-tag {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5rpx 22rpx;
  margin-left: 10rpx;
  color: #FFFFFF;
  font-size: 24rpx;
  line-height: 24rpx;
  font-weight: medium;
  background-color: var(--theme);
  border-radius: 50rpx;
}

.contact-card-left-bottom {
  font-size: 28rpx;
  line-height: 28rpx;
  color: #333333;
  font-weight: medium;
}

.contact-card-button-icon {
  width: 24rpx;
  height: 24rpx;
  margin-right: 10rpx;
}
</style>
